<template>
	<div id='employeeDetail'>
		<div class="title">{{title}}</div>
    <div class="header">
      <div class="avatar-content" style="margin-right: 20px">
        <d-avatar class="avatar-edit" :width="68" :img-url="employeeForm.avatar" :name="employeeForm.firstName + ' ' + employeeForm.middleName+ ' ' + employeeForm.lastName" ></d-avatar>
        <div v-touch-ripple  class="iconfont edit-avatar " @click="showImgCropper=true">&#xe607;</div>
      </div>
      <div class="base-info-content">
        <div class="employee-name">{{employeeName || ""}}</div>
        <div class="info-row">
          <div class="info-item">
            <label class="key">Work   Location</label><label class="value">{{employeeForm.workAddress||""}}</label>
            <label class="key icon"><i class="iconfont email-icon">&#xe685;</i></label><label class="value">{{employeeForm.emailAddress||""}}</label>
            <label class="key icon"><i class="iconfont phone-icon">&#xe68a;</i></label><label class="value">{{employeeForm.workTel||""}}</label>
          </div>
          <div class="info-item">
            <label class="key">Time  Zone</label><label class="value">{{employeeForm.timeZone || ""}}</label>
          </div>
        </div>
      </div>
    </div>
		<div class="content">
      <ul class="employee-detail-nav">
        <router-link  class="item" :to="'/views/org/employee/employeeDetail/'+$route.params.id+'/personInfo'" tag="li" active-class="active" replace>Person Info</router-link>
        <router-link class="item" :to="'/views/org/employee/employeeDetail/'+$route.params.id+'/payrollInfo'" tag="li" active-class="active" replace>Payroll Info</router-link>
        <router-link class="item" :to="'/views/org/employee/employeeDetail/'+$route.params.id+'/attendance'" tag="li" active-class="active" replace>Attendance</router-link>
      </ul>
      <router-view></router-view>
    </div>
    <d-Modal  v-if="showImgCropper" @close="showImgCropper = false">
      <span slot="header">image Cropper</span>
      <div slot="body" class="upLoad_panel">
        <d-img-cropper @close="showImgCropper = false"   @cropper-ok="uploadHeaderConfirm"></d-img-cropper>
      </div>
    </d-Modal>
	</div>
</template>

<script>
  import dImgCropper from 'src/components/common/ImgCropper.vue';
  import dModal from 'src/components/common/Modal.vue';
	export default {
		name: 'EmployeeDetail',
    components:{
      dModal,
      dImgCropper
    },
    computed:{
      employeeForm(){
        return this.$store.getters.employeeForm;
      },
      employeeName(){
        var firstName = this.employeeForm.firstName || "";
        var middleName = this.employeeForm.middleName || "";
        var lastName = this.employeeForm.lastName || "";
        return `${firstName} ${middleName} ${lastName}`;
      }
    },
		data () {
			return {
				title: 'Employee Details',
        showImgCropper:false,
			}
		},
    methods:{
      uploadHeaderConfirm:function(blob) {
        var t = this;
        var formData = new FormData();
        formData.append('id', t.id);
        formData.append('headImg', blob);
        //this.$store.dispatch('updateEmployeeHeaderImage',formData);
        $.ajax({
          url: '/employee/updateHeadImg',
          data: formData,
          dataType: 'json',
          type: 'post',
          processData: false,
          contentType: false,
          success: function (data) {

          }
        })
      }
    }
	}
</script>


<style rel="stylesheet/scss" type="text/css" lang="scss">
	@import "src/assets/css/variable.scss";

	#employeeDetail {
    >.header{
      display: flex;
      box-sizing: border-box;
      width: 100%;
      height: 180px;
      background: #FFFFFF;
      padding: 33px 60px;
      box-shadow: 0 2px 8px 0 rgba(184,198,239,0.80);
      border-radius: 4px;
      margin-bottom: 20px;
      .avatar-content{
        position: relative;
        flex:0;
        &:hover{
          .edit-avatar{
            display: inline-block;
          }
        }
        .edit-avatar{
          position: absolute !important;
          display: none;
          top: 0;
          left: 0;
          width: 68px;
          height: 68px;
          background: rgba(0,0,0,.7);
          border-radius: 50%;
          text-align: center;
          line-height: 68px;
          font-size: 24px;
          color: $baseColor;
        }
        .avatar-edit:hover{
          background-color: #ddd;
        }
      }
      .base-info-content{
        flex:1;
        >.employee-name{
          /*font-family: PingFangTC-Medium;*/
          font-size: 18px;
          color: #325570;
          line-height: 25px;
          margin-bottom: 10px;
        }
        >.info-row{
          >.info-item{
            /*font-family: PingFangTC-Regular;*/
            font-size: 14px;
            line-height: 22px;
            margin-bottom: 9px;
            >.key{
              display: inline-block;
              width: 130px;
              color: #96ACB9;
              &.icon{
                width: 30px;
                .email-icon,.phone-icon{
                  color: #325570;
                }
                .email-icon{
                  font-size: 12px;
                }
                .phone-icon{
                  font-size: 14px;
                }
              }
            }
            >.value{
              color: #325570;
              margin-right: 55px;
            }
          }
        }
      }
    }
    >.content{
      padding: 0;
      .employee-detail-nav{
        width: 100%;
        padding-left: 60px;
        background: rgba(195,226,255,0.33);
        border-radius: 4px 4px 0 0;
        >.item{
          display: inline-block;
          height: 56px;
          line-height: 56px;
         /* font-family: PingFangTC-Regular;*/
          font-size: 18px;
          color: #96ACB9;
          padding: 0 2px;
          margin-right: 60px;
          cursor: pointer;
          &:hover{
            color: $baseColor;
          }
          &.active{
            color: $baseColor;
            border-bottom: 2px $baseColor solid ;
          }
        }
      }
      .employee-detail-tab{
        height: 900px;
        .ivu-tabs-nav{
          width: 100%;
          height: 56px;
          line-height: 36px;
          padding-left: 60px;
         /* font-family: PingFangTC-Regular;*/
          font-size: 18px;
          color: #96ACB9;
          background: rgba(195,226,255,0.33);
          border-radius: 4px 4px 0 0;
          .ivu-tabs-tab{

          }
        }
        .ivu-tabs-ink-bar{
          margin-left: 60px;
        }
        /*员工信息*/
        .person-info-tab-content{
          padding: 50px 61px;
        }
      }
    }

	}
</style>
